<template>
	<view class="page">
		<Navbar title="阿姨" :isBack="false"></Navbar>
		<view style="background-color: #fff;padding: 20rpx 20rpx 0;">
			<view style="padding: 0 180rpx 20rpx;">
				<u-subsection :list="subsectionList" :current="current" font-size="38" active-color="#DD1A00"
					bg-color="#F1E4E2" button-color="#FFFFFF" @change="handelSubsection"></u-subsection>
			</view>
			<scroll-view :scroll-y="true" class="u-flex filtrate-list">
				<u-tabs name="label" is-scroll active-color="#dd1a00" :list="typeList" :current="typeCurrent"
					@change="typeChange"></u-tabs>
			</scroll-view>
			<view class="u-flex filtrate-list" v-if="current == 0">
				<view class="u-flex-1 u-flex u-row-center u-font-32" style="border-right: 1px solid #d4e0e3;"
					@click="typeShow = true">
					工作能力
					<image src="/static/image/icon-bottom.png"></image>
				</view>
				<view class="u-flex-1 u-flex u-row-center u-font-32" @click="capacityShow = true">
					工资范围
					<image src="/static/image/icon-bottom.png"></image>
				</view>
			</view>
			<view style="padding: 1% 0 2%;min-height: 100rpx;position: relative;"
				v-if="current == 1 && typeCurrent != 0">
				<view class="u-row-center u-font-28">服务内容：{{ purifierTypeList[typeCurrent].Comment }}</view>
				<view class="u-row-center u-font-28">建议薪酬：{{ purifierTypeList[typeCurrent].WageComment }}</view>
				<view @click="contentShow = true" style="position: absolute;right: 0;bottom: 5%;color: #2196F3;">
					详情
					<u-icon size="26" name="arrow-right-double"></u-icon>
				</view>
			</view>
		</view>

		<scroll-view style="height: calc(100vh - 95px - 102px);" scroll-y refresher-enabled
			:refresher-triggered="refresherTriggered" @scrolltolower="scrolltolower"
			@refresherrefresh="refresherrefresh">
			<view class="u-margin-20" key="1" v-for="item in dataList" :key="item.Id">
				<u-card :border="false" :show-head="false" margin="0" padding="20">
					<view class="u-flex u-col-top nanny-data" slot="body"
						@click="link_to_page('/pages-nanny/pages/detail/index?id=' + item.Id + '&type=' + current)">
						<view style="position: relative;">
							<image class="head-img" :src="imgBaseUrl + '/' + item.Photo" mode="aspectFill"></image>
							<view class="excellent-border" v-if="false">
								<image class="excellent" src="/static/image/icon-nanny-excellent.png"></image>
							</view>
						</view>

						<view class="u-flex-1" v-if="current == 0">
							<view class="u-flex name">
								<view>{{ item.Name.charAt(0)+'阿姨' }} {{ item.No }} </view>
								<image src="/static/image/icon-nanny-diamond.png" v-if="false" />
								<image src="/static/image/icon-nanny-gold.png" v-if="false" />
							</view>
							<view class="class">
								{{ calculateAge(item.BirthDate) }} 岁 | 工龄{{ item.WorkExp || 0 }}年 |
								{{ item.Education || '' }} | 现居地址：{{ item.Address || '' }}
							</view>
							<view class="">
								<!-- <view class="type" v-for="value in item.Labels" :key="value">{{ value }}</view> -->
								<view class="type_yes" v-if="item.Bx == true">有保险</view>
								<view class="type_no" v-else>无保险</view>
								<view class="type_yes" v-if="item.Jkz">健康证明</view>
								<view class="type_no" v-else>无健康证明</view>
								<view class="type_yes" v-if="item.Sgz">有证</view>
								<view class="type_no" v-else>无上岗证</view>
							</view>
							<view class="u-padding-bottom-10 u-font-24">工作范围： {{ item.AbilityTypesStr || '' }}</view>
							<!-- <view class="u-font-24">工资待遇： {{ item.Wage ? item.Wage + '元起' : '' }}</view> -->
						</view>

						<view class="u-flex-1" v-else>
							<view class="u-flex name">
								<view>{{ item.Name }}</view>
							</view>
							<view class="class">{{ calculateAge(item.BirthDate) }} 岁 | 工龄{{ item.WorkExp || 0 }}年 |
								现居地址：{{ item.Address || '' }}</view>
							<view class="">
								<!-- <view class="type" v-for="value in item.Labels" :key="value">{{ value }}</view> -->
								<view class="type_yes" v-if="item.Bx == true">有保险</view>
								<view class="type_no" v-else>无保险</view>
								<view class="type_yes" v-if="item.Jkz">健康证明</view>
								<view class="type_no" v-else>无健康证明</view>
								<view class="type_yes" v-if="item.Sgz">有证</view>
								<view class="type_no" v-else>无上岗证</view>
							</view>
							<view class="u-padding-bottom-10 u-font-24">距离： {{ item.JL || '0' }} km</view>
						</view>
					</view>
				</u-card>
			</view>
			<u-empty text="数据为空" mode="data" v-if="!dataList.length && !dataLoading"></u-empty>
		</scroll-view>

		<u-select v-model="typeShow" :list="workingList" @confirm="confirmType"></u-select>
		<u-select v-model="capacityShow" :list="SalaryList" @confirm="confirmCapacity"></u-select>
		<u-popup v-model="contentShow" mode="right">
			<view style="width:450rpx;height: 100%;padding: 230rpx 3% 10rpx;">
				<view v-html="purifierTypeList[typeCurrent].ServiceStandard || ''" class="u-font-32"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				subsectionList: [{
						name: '保姆'
					},
					{
						name: '保洁'
					}
				],
				current: 0,
				id: '',
				typeShow: false,
				typeList: [],
				capacityShow: false,
				capacityList: [],
				nannyTypeList: [],
				workingList: [], //工作能力
				SalaryList: [], //工资范围
				nannyCapacityList: [],
				purifierTypeList: [],
				dataList: [],
				dataTotal: 0,
				dataLoading: false,
				queryData: {
					rows: 10,
					page: 1,
					type: '',
					nl: '',
					fw: '',
					typeId: ''
				},
				refresherTriggered: false,
				typeCurrent: 0,
				latitude: '',
				longitude: '',
				contentShow: false
			};
		},
		onHide() {
			this.contentShow = false;
		},
		onLoad(e) {
			const current = e.type || 0;
			this.id = e.id || '';
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.getLocation({
				type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
				success: res => {
					this.latitude = res?.latitude ?? '';
					this.longitude = res?.longitude ?? '';
					this.pageInit(current);
					uni.hideLoading()
				},
				fail: err => {
					this.pageInit(current);
					uni.hideLoading()
				}
			});

			// 工作能力
			this.$u.api
				.GetDictionary({
					type: '工作能力'
				})
				.then(res => {
					if (res && res.code == 0) {
						this.workingList = res.data.map(item => {
							return {
								value: item.Code,
								label: item.Name
							};
						});
						this.workingList.unshift({
							value: '',
							label: '全部'
						});
					}
				});
			// 工资范围
			this.$u.api
				.GetDictionary({
					type: '工资范围'
				})
				.then(res => {
					if (res && res.code == 0) {
						this.SalaryList = res.data.map(item => {
							return {
								value: item.Code,
								label: item.Name
							};
						});
						this.SalaryList.unshift({
							value: '',
							label: '全部'
						});
					}
				});
		},
		methods: {
			pageInit(current) {
				// 保姆类型
				this.$u.api
					.GetDictionary({
						type: '岗位类型'
					})
					.then(res => {
						if (res && res.code == 0) {
							this.nannyTypeList = res.data.map(item => {
								return {
									value: item.Code,
									label: item.Name
								};
							});
							this.nannyTypeList.unshift({
								value: '',
								label: '全部'
							});
							if (current == 0) {
								this.typeList = this.nannyTypeList;
							}

							// 保洁类型
							this.$u.api
								.GetByCategory({
									categoryNo: 100002
								})
								.then(res => {
									if (res && res.code == 0) {
										this.purifierTypeList = res.data.map(item => {
											return {
												value: item.Id,
												label: item.Name,
												Comment: item.Comment,
												WageComment: item.WageComment,
												ServiceStandard: item.ServiceStandard
											};
										});
										this.purifierTypeList.unshift({
											value: '',
											label: '全部'
										});
										if (current == 1) {
											this.typeList = this.purifierTypeList;
										}
										this.handelSubsection(current);
									}
								});
						}
					});
			},
			handelSubsection(e) {
				this.typeCurrent = 0;
				this.typeList = [];
				this.$nextTick(() => {
					this.current = e;
					this.queryData = {
						rows: 10,
						page: 1,
						type: '',
						nl: '',
						fw: '',
						typeId: ''
					};
					this.dataList = [];
					if (this.current == 0) {
						this.typeList = this.nannyTypeList;
						// this.capacityList = this.nannyCapacityList;
					} else {
						this.typeList = this.purifierTypeList;
						// this.capacityList = [];
					}
					// this.getList();
					let typeIndex = 0;
					if (this.id) {
						this.typeList.forEach((item, index) => {
							if (item.value == this.id) {
								typeIndex = index;
							}
						});
						this.typeChange(typeIndex);
					} else {
						this.typeChange(typeIndex);
					}
					this.id = '';
				});
			},
			//工作能力
			confirmType(e) {
				if (e && e[0]) {
					this.queryData.nl = e[0].value;
					// 筛选重置
					this.dataList = [];
					this.queryData.page = 1;
					this.getList();
				}
			},
			//工资范围
			confirmCapacity(e) {
				if (e && e[0]) {
					this.queryData.fw = e[0].value;
					// 筛选重置
					this.dataList = [];
					this.queryData.page = 1;
					this.getList();
				}
			},
			typeChange(e) {
				this.typeCurrent = e;
				if (this.current == 0) {
					this.queryData.type = this.nannyTypeList[e].value;
				} else {
					this.queryData.typeId = this.purifierTypeList[e].value;
				}
				// 筛选重置
				this.dataList = [];
				this.queryData.page = 1;
				this.getList();
			},
			getList() {
				if (this.dataLoading) return;
				this.dataLoading = true;
				let data = {
					rows: this.queryData.rows,
					page: this.queryData.page,
					type: this.queryData.type,
					nl: this.queryData.nl,
					fw: this.queryData.fw
				};
				let api = this.$u.api.GetEmployeeListByType; // 保姆
				if (this.current == 1) {
					api = this.$u.api.GetPurifierList; //保洁
					data = {
						rows: this.queryData.rows,
						page: this.queryData.page,
						typeId: this.queryData.typeId,
						Lon: this.longitude,
						lat: this.latitude
					};
				}
				api(data).then(res => {
					if (res) {
						if (this.current == 0) {
							this.dataList = [...this.dataList, ...res.rows];
							this.dataTotal = res.total;
						} else {
							this.dataList = [...this.dataList, ...res.data];
							this.dataTotal = res.pager.total;
						}
					}
					this.refresherTriggered = false;
					this.dataLoading = false;
				});
			},
			// 上拉加载
			scrolltolower() {
				if (this.dataLoading) return;
				if (this.dataTotal <= this.dataList.length) return;
				this.queryData.page += 1;
				this.getList();
			},
			// 下拉刷新
			refresherrefresh() {
				this.refresherTriggered = true;
				this.handelSubsection(this.current);
			},
			calculateAge(birthDateStr) {
				const birthDate = new Date(birthDateStr);
				const today = new Date();
				let age = today.getFullYear() - birthDate.getFullYear();
				const m = today.getMonth() - birthDate.getMonth();
				if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}
				return age;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f4f5f7;
	}

	.filtrate-list {
		height: 90rpx;
		padding: 0 0;
		border-top: 1px solid #d4e0e3;

		image {
			width: 24rpx;
			height: 13rpx;
			margin-left: 8rpx;
		}
	}

	.nanny-data {
		.excellent-border {
			position: absolute;
			left: 0;
			top: 0;
			width: 180rpx;
			height: 206rpx;
			border: 4rpx solid #ff5a00;
			border-radius: 10rpx;

			.excellent {
				position: absolute;
				left: -2rpx;
				top: -2rpx;
				width: 80rpx;
				height: 38rpx;
			}
		}

		.head-img {
			width: 180rpx;
			height: 206rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			background-color: #ccc;
		}

		.name {
			font-size: 28rpx;
			font-weight: 600;

			image {
				min-width: 128rpx;
				min-height: 38rpx;
				max-width: 128rpx;
				max-height: 38rpx;
				margin-left: 8rpx;
			}
		}

		.class {
			font-size: 24rpx;
			margin: 10rpx 0;
		}

		.type {
			display: inline-block;
			border-radius: 6rpx;
			padding: 6rpx 23rpx;
			margin: 0 15rpx 15rpx 0;
			font-size: 24rpx;
			color: #d16c5e;
			border: 2rpx solid #ffada1;
			background-color: #fee7e4;
		}

		.type_yes {
			display: inline-block;
			border-radius: 6rpx;
			padding: 6rpx 23rpx;
			margin: 0 15rpx 15rpx 0;
			font-size: 24rpx;
			color: #00b500;
			border: 2rpx solid #00b500;
			background-color: #d1ffd1;
		}

		.type_no {
			display: inline-block;
			border-radius: 6rpx;
			padding: 6rpx 23rpx;
			margin: 0 15rpx 15rpx 0;
			font-size: 24rpx;
			color: #909399;
			border: 2rpx solid #c8c9cc;
			background-color: #f4f4f5;
		}
	}
</style>